<template>
  <div class="contain">
    <div>
      <a-form class="form" :form="form">
        <a-row type="flex" justify="space-between">
          <a-col
            :span="9"
            class="margin-bottom"
          >
            <a-row class="row">
              <a-col :span="8">
                <div class="login-title">
                  <!--              <a-icon type="user" :style="{ fontSize: '17px'}"/>-->
                  <div class="row-title">所属用户组：</div>
                </div>
              </a-col>

              <a-col :span="16">
                <a-input :default-value="userGroup" disabled=""></a-input>
              </a-col>
            </a-row>
<!--            <a-input default-value="234" disabled=""></a-input>-->
<!--            <a-select default-value="所属用户组" @change="handleChange">-->
<!--              <a-select-option value="jack">-->
<!--                Jack-->
<!--              </a-select-option>-->
<!--              <a-select-option value="lucy">-->
<!--                Lucy-->
<!--              </a-select-option>-->
<!--            </a-select>-->
          </a-col>
          <a-col
            :span="9"
            class="margin-bottom"
          >
            <div class="flex-center">
              <a-input-group compact>
                <a-select default-value="精准" @change="selectChange">
                  <a-select-option value="精准">
                    精准
                  </a-select-option>
                  <a-select-option value="模糊">
                    模糊
                  </a-select-option>
                </a-select>
                <a-input style="width: 58%" placeholder="昵称/姓名/手机号码/openic" v-model="searchValue"/>
              </a-input-group>
            </div>
          </a-col>
<!--          <a-col-->
<!--            :span="6"-->
<!--            class="margin-bottom"-->
<!--          >-->
<!--            <div class="flex-center">-->
<!--              <a-date-picker></a-date-picker>-->
<!--            </div>-->
<!--          </a-col>-->
        </a-row>
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="searchList" icon="search">
              查询
            </a-button>
            <a-button type="primary" :style="{ marginLeft: '8px' }" @click="createInfo" icon="plus">
              新增
            </a-button>
            <a-button type="primary" :style="{ marginLeft: '8px' }" @click="exportExcel" icon="export">
              导出
            </a-button>
            <template v-if="this.level != '普通用户'">
              <a-button type="primary" :style="{ marginLeft: '8px' }" @click="sendEmailInfo" icon="mail">
                批发邮件
              </a-button>
            </template>
          </a-col>
        </a-row>
      </a-form>
      <div class="table">
        <a-table :columns="columns" :data-source.sync="data" bordered class="column" :pagination="pagination" :loading="isLoading"
                 :row-selection="{ onSelect: onSelect,onSelectAll: onSelectAll}" >
          <template
            v-for="col in ['workshop', 'machine', 'equitment','equitmentCode','model','factory','operation']"
            :slot="col"
            slot-scope="text, record, index"
          >
            <div :key="index" class="column-content" slot="title" :title="text">
              {{ text }}
            </div>
          </template>
          <template slot="operation" slot-scope="text, record, index">
            <div class="editable-row-operations">
               <span class="oper">
<!--                  <a @click="() => createRepair(record,text)">新增零件</a>-->
                  <a @click="() => editUser(record,text)">管理设置</a>
                  <a-popconfirm title="是否确定删除?" cancelText="取消" okText="确定" @confirm="() => deleteUserItem(record)">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
            </div>
          </template>
        </a-table>
      </div>
    </div>
    <!--  新增、编辑弹窗    -->
    <action-modal :modalVisible.sync="isShowModal" :data.sync="modalData" :dataList.sync="data" :title="modalTitle"></action-modal>
<!--    <action-modal :modalVisible.sync="isShowModal" :data.sync="modalData" :title="modalTitle" :dataList.sync="data" :dataDrop.sync="dropList"></action-modal>-->
  </div>
</template>

<script>
  import {userList,deleteUser} from '../api/index';
   import ActionModal from "./Modal/ActionModal";

  // import {deleteDev, getDevList, getDropDevList} from "../api/index";
  // import QRCode from 'qrcodejs2';     //引入二维码
  const columns = [
    {
      title: '会员ID',
      dataIndex: 'id',
      width: '11%',
      ellipsis: true,
      align: 'center',
      scopedSlots: { customRender: 'id' },
    },
    {
      title: '分组',
      dataIndex: 'group',
      width: '7%',
      ellipsis: true,
      align: 'center',
      scopedSlots: { customRender: 'group' },
    },
    {
      title: '等级',
      dataIndex: 'level',
      width: '10%',
      ellipsis: true,
      align: 'center',
      scopedSlots: { customRender: 'level' },
    },
    {
      title: '昵称/姓名',
      dataIndex: 'username',
      width: '9%',
      ellipsis: true,
      align: 'center',
      scopedSlots: { customRender: 'username' },
    },
    {
      title: '手机',
      dataIndex: 'phone',
      width: '12%',
      ellipsis: true,
      align: 'center',
      scopedSlots: { customRender: 'phone' },
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      width: '15%',
      ellipsis: true,
      align: 'center',
      scopedSlots: { customRender: 'email' },
    },
    {
      title: '会员到期日',
      dataIndex: 'limit',
      width: '10%',
      ellipsis: true,
      align: 'center',
      scopedSlots: { customRender: 'limit' },
    },
    {
      title: '注册时间',
      dataIndex: 'created',
      width: '9%',
      ellipsis: true,
      align: 'center',
      scopedSlots: { customRender: 'created' },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align: 'center',
      scopedSlots: { customRender: 'operation' },
    },
  ];

  const data = [];

  //表格数据
  // for (let i = 0; i < 25; i++) {
  //   data.push({
  //     eWorkshop: `143${i}`,
  //     eMachine: `Elaine${i}`,
  //     eName: `1788846839${i}`,
  //     eCode: `58579897@qq.com`,
  //     eType: `2021-09-10`,
  //     e_fName: `2020-09-10 09:00`
  //   });
  // }
  export default {
    name: "DeviceInfo.vue",
    components: {
       ActionModal
    },
    created() {
      this.getUserList()
    },
    data(){
      this.cacheData = data.map(item => ({ ...item }));
      return{
        isShowModal: false,
        modalTitle: '',
        modalData: [],
        dropList: [],   //下拉列表
        userGroup: 'admin',  //用户所属组
        searchOption: true,
        emailList: [],  //批发邮件
        emailUserList: [],  //批发邮件用户名
        searchValue: '',
        level: window.localStorage.getItem('level'),
        form: this.$form.createForm(this, { name: 'advanced_search' }),
        isLoading: false, //表格分页加载
        pageNum: 1,   //记录当前页码
        pagination: {
          total: 0,
          defaultPageSize: 10,
          // onChange:(page,pageSize)=>this.devList(page,pageSize),//点击页码事件
        },
        data,
        columns,
        editingKey: '',
        treeExpandedKeys: [],
        selectCode: [],
      }
    },
    mounted() {
      // this.creatQrCode();
    },
    methods: {
      //查询用户
      searchList(){
        let params = {
          group: this.userGroup,
          precise: this.searchOption,
          content: this.searchValue
        }
        userList(params)
          .then((res) => {
            if (res.status == 200){
              this.data = res.users
              console.log("res userList", res)
            }
          })
          .catch((err) => {
            this.$message.error("系统错误！");
          })
      },
      //切换精准模糊查询
      selectChange(value){
        if (value == "模糊"){
          this.searchOption = false
        }else{
          this.searchOption = true
        }
      },
      //用户列表
      getUserList(){
        this.userGroup = window.localStorage.getItem('group')
        let params = {
          group: this.userGroup
        }
        userList(params)
          .then((res) => {
            if (res.status == 200){
              this.data = res.users
              console.log("res userList", res)
            }
          })
          .catch((err) => {
            this.$message.error("系统错误！");
          })
      },
      //新增用户信息
      createInfo(){
        this.isShowModal = true
        this.modalTitle = '新增'
        this.modalData.actionText = '新增用户'
        let data = [
          {
            label: '账号',
            name: 'username'
          },
          {
            label: '密码',
            name: 'password'
          },
          {
            label: '所属组',
            name: 'group'
          },
          {
            label: '邮箱',
            name: 'email'
          },
          {
            label: '手机号码',
            name: 'phone'
          },
          {
            label: '等级',
            name: 'level'
          },
          {
            label: '到期时间',
            name: 'limit'
          }
        ]
        this.modalData.createData = data
      },
      // 编辑用户信息
      editUser(value,text){
        console.log("value",value,text)
        let editData = [
          {
            label: '账号',
            name: 'username',
            key: 'username',
            content: value.username,
          },
          {
            label: '新密码',
            name: 'password',
            key: 'password',
            content: '',
          },
          {
            label: '所属组',
            name: 'group',
            key: 'group',
            content: value.group,
          },
          {
            label: '邮箱',
            name: 'email',
            key: 'email',
            content: value.email,
          },
          {
            label: '手机号码',
            name: 'phone',
            key: 'phone',
            content: value.phone,
          },
          {
            label: '等级',
            name: 'level',
            key: 'level',
            content: value.level,
          },
          {
            label: '到期时间',
            name: 'limit',
            key: 'limit',
            content: value.limit,
          },
        ]
        let editData2 = [
          {
            label: '账号',
            name: 'username',
            key: 'username',
            content: value.username,
          },
          {
            label: '新密码',
            name: 'password',
            key: 'password',
            content: '',
          },
          {
            label: '所属组',
            name: 'group',
            key: 'group',
            content: value.group,
          },
          {
            label: '邮箱',
            name: 'email',
            key: 'email',
            content: value.email,
          },
          {
            label: '手机号码',
            name: 'phone',
            key: 'phone',
            content: value.phone,
          },
          {
            label: '到期时间',
            name: 'limit',
            key: 'limit',
            content: value.limit,
          },
        ]
        this.isShowModal = true
        this.modalTitle = '管理设置'
        this.modalData.actionText = '管理设置'
        if (value.level == '超级管理员'){
          this.modalData.editData = editData2
        }else{
          this.modalData.editData = editData
        }
        this.modalData.value = value
        this.modalData.displayData = ""
      //  this.modalData.pageNum = this.pageNum//记录当前页码
       // this.modalData.pageSize = this.pageSize//记录当前页数大小
      },
      //删除用户
      deleteUserItem(record){
        console.log(record.id)
        deleteUser(record.id)
          .then((res) => {
            if (res.status == 200){
              this.$message.success(res.msg);
              this.getUserList();
            }
          })
      },
      //批发邮件
      sendEmailInfo(){
        if (this.emailUserList.length > 0){
          this.isShowModal = true
          this.modalTitle = '发送邮件'
          this.modalData.actionText = '发送邮件'
          let data = [
            {
              label: '邮件标题',
              name: 'title'
            },
            {
              label: '邮件内容',
              name: 'content'
            }
          ]
          this.modalData.sendData = data
          this.modalData.emailUserList = this.emailUserList
          this.modalData.emailList = this.emailList
        }
        else{
          this.$message.info("请先勾选需要发送邮件的用户！");
        }
      },
      //导出表格
      exportExcel(){
        if (this.data.length > 0){
          this.export2Excel()
        }
        else{
          this.$message.info("表格数据为空，无法导出！");
        }

      },
      export2Excel() {
        require.ensure([], () => {
          const { export_json_to_excel } = require('../excel/Export2Excel')
          const tHeader = ['会员ID', '分组', '等级', '昵称/姓名', '手机号码','邮箱','会员到期日','注册时间']
          const filterVal = ['id', 'group', 'level', 'username', 'phone','email','limit','created']
          const list = this.data;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '用户数据');
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      //选择
      onSelect(record, selected, selectedRows){
        this.emailList = []
        this.emailUserList = []
        this.selectCode = selectedRows
        Array.prototype.pushNoRepeat = function(){
          for(var i=0; i<arguments.length; i++){
            var ele = arguments[i];
            if(this.indexOf(ele) == -1){
              this.push(ele);
            }
          }
        };
        selectedRows.forEach((item,index) => {
          this.emailList.pushNoRepeat(item.email)
          this.emailUserList.pushNoRepeat(item.username)
        })
        console.log("select选中",record, selected, selectedRows);
        console.log("this.selectedRow", this.selectCode,this.emailList, this.emailUserList)
      },
      //选择全部
      onSelectAll(selected, selectedRows, changeRows){
        this.selectCode = selectedRows
        Array.prototype.pushNoRepeat = function(){
          for(var i=0; i<arguments.length; i++){
            var ele = arguments[i];
            if(this.indexOf(ele) == -1){
              this.push(ele);
            }
          }
        };
        selectedRows.forEach((item,index) => {
          this.emailList.pushNoRepeat(item.email)
          this.emailUserList.pushNoRepeat(item.username)
        })
        console.log("全选",selected, selectedRows, changeRows);
        console.log("全选",this.emailList, this.emailUserList);
      },
    },
  }
</script>

<style scoped>
  .contain{
    color: #ffffff;
    background-color: #F6F6F6;
  }
  .form {
    padding: 24px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
  }
  .form .ant-form-item {
    display: flex;
  }
  .table{
    background-color: #fbfbfb;
    margin-top: 30px;
    border-radius: 6px;
  }
  .column{
    background-color: #ffffff;
  }
  .oper{
    display: flex;
    justify-content: space-between;
  }
  .column-content{
    overflow: hidden;
  }
  .flex-center{
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
  }
  .margin-bottom{
    margin-bottom: 20px;
  }
  .printCode{
    background-color: #2f54eb;
  }
  .title{
    font-size: 16px;
    font-weight: 600;

  }
  /*.qrcode{*/
  /*  background-color: red;*/
  /*  margin-top: 10px;*/
  /*  img {*/
  /*    display: inline-block;*/
  /*    width: 132px;*/
  /*    height: 132px;*/
  /*    background-color: #fff; //设置白色背景色*/
  /*    padding: 6px; // 利用padding的特性，挤出白边*/
  /*    box-sizing: border-box;*/
  /*    border: 1px solid yellow;*/
  /*    margin-right: 10px;*/
  /*  }*/
  /*}*/
  .imgGen{
    background-color: #13c2c2;
  }
</style>